<template>
	<view class="container">
		<StatusNavList @touchmove.stop.prevent></StatusNavList>
		<Search @touchmove.stop.prevent @filterClick="clickFilter()" :shai-xuan="shaixuan"></Search>
		<Masks v-if="show_mask"></Masks>
		<shai-xuan v-if="show_mask"></shai-xuan>
		<scroll-view class="list-scroll-content" scroll-y @scrolltolower="getList" >
			<view>
				<water-fall ref="waterfallFlow" offset="10rpx" :list="list" @load="waterfallFlowLoad">
					<template v-slot:left="{leftList}">
						<view class="item-warter" v-for="(item, index) in leftList" :key="index"
							@click="e => clickItem(item)">
							<image mode="widthFix" :src="item.discover" :lazy-load="false"></image>
							<view class="text-break-all">{{ item.name }}</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="item-warter" v-for="(item, index) in rightList" :key="index"
							@click="e => clickItem(item)">
							<image mode="widthFix" :src="item.discover" :lazy-load="false"></image>
							<view class="text-break-all">{{ item.name }}</view>
						</view>
					</template>
				</water-fall>
			</view>
		</scroll-view>
		
	</view>
</template>
<!-- 自定义一些组件测试 -->
<script>
	import DiyNav from "@/components/diy-nav-back"
	import StatusNavList from "@/components/status-nav-list"
	import Search from "@/components/search"
	import WaterFall from "@/components/waterfall"
	import Masks from '@/components/mask';
	import ShaiXuan from '@/components/shaixuan';
	import Api from '@/common/api';
	export default {
		components: {
			DiyNav,
			StatusNavList,
			Search,
			WaterFall,
			Masks,
			ShaiXuan
		},
		data() {
			return {
				shaixuan: '',
				list: [], // PS: 直接写死在这里瀑布流并不会渲染，因为内部是watch监听渲染的，需要在其他地方被赋值，如onLoad
				count: 0,
				page: 1,
				size: 6,
				show_mask:true
			}
		},

		onLoad() {
			this.getList();
		},
		beforeCreate() {

		},
		beforeDestroy() {


		},

		// 页面触底事件，加载下一页
		onReachBottom() {
			console.log('next')
			// this.getList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.list = [];
			/** 
			 * 数据被置空时，this.$refs.waterfallFlow.clear()方法是必须要调的
			 * 如果是强制渲染的场景请使用this.$refs.waterfallFlow.update(), 例如排序
			 * */
			this.$refs.waterfallFlow.clear();

			setTimeout(() => {
				this.getList();
				uni.stopPullDownRefresh();
			}, 500);
		},
		onPageScroll(e) {
			console.log('滚动信息', e)
		},
		methods: {
			clickFilter() {
				this.shaixuan = this.shaixuan == 'sx' ? '' : 'sx';
				console.log(this.shaixuan)
			},
			async getList2() {
				let params = {
					page: this.page,
					size: this.size
				}
				let data = await Api.apiCall('get', Api.apiName.course_list, params);
				if (data.data.length > 0) {
					this.list = this.list.concat(data.data);
				}
				this.page++;

			},
			getList() {
				console.log('加载')
				const tem = [];
				for (let i = 0; i < 10; i++) {
					this.count++
					const height = this.randomAccess(200, 400);
					const url = `https://picsum.photos/id/${this.count}/200/${height}`
					// const title = this.getRandomName(height / 2 / 2 / 2);
					const title = '测试'
					tem.push({
						url,
						title,
						id: this.count
					}); // 之前声明tem忘记使用了，应该改成这样写，不要在for里面给data赋值哦！！
				};
				this.list = this.list.concat(tem);
			},
			// 生成一定范围内的随机数
			randomAccess(min, max) {
				return Math.floor(Math.random() * (min - max) + max)
			},
			// 解码
			decodeUnicode(str) {
				str = "\\u" + str;
				str = str.replace(/\\/g, "%");
				str = unescape(str);
				str = str.replace(/%/g, "\\");
				return str;
			},
			// 随机生成汉字
			getRandomName(NameLength) {
				let name = "";
				for (let i = 0; i < NameLength; i++) {
					let unicodeNum = "";
					unicodeNum = this.randomAccess(0x4e00, 0x9fa5).toString(16);
					name += this.decodeUnicode(unicodeNum);
				};
				return name;
			},
			// 元素项被点击
			clickItem(item) {
				// 可做页面跳转等
				console.log("点击了：", item);
			},
			// 瀑布流列表渲染完毕
			waterfallFlowLoad(event) {
				console.log("渲染完成：", event);
			}
		},


	}
</script>

<style lang="scss">
	page {
		// background: #000000;

	}

	.container {
		position: relative;
		width: 100%;
		height: 100%;
	}
	::-webkit-scrollbar{
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
	.uni-searchbar__box {
		border: 1px solid rgba(204, 204, 204, 0.5);
	}

	.list-scroll-content {
		height: 100vh;
	}

	.item-warter {
		width: 100%;
		height: auto;
		background-color: #ffaaff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	/* PS: 快手小程序不支持该选择器，在template中用js判断加上边距 */
	.item-warter:nth-child(n+2) {
		margin-top: 10rpx;
	}

	.item-warter image {
		width: 100%;
	}

	.text-break-all {
		word-break: break-all;
	}
</style>